import React, { useEffect, memo,useState } from "react"
import { connect } from "react-redux"
import * as actionTypes from './store/actionCreators'
import { useLocation,useHistory } from "react-router-dom"
import './SingerDetail.css'
import Scroll from "../../baseUI/scroll"
import SongList from '../../components/detail/songlist/SongList'
import ellipsis_white from '../../assets/images/ellipsis_white.png'
import left_arrow from '../../assets/images/left_arrow_white.png'
import ControlSong from '../../baseUI/Control/controlSong'
let SingerID;
let songId =null;

const SingerDetail = (props) => {
    // console.log(props,'singger')
    const { getDetailDataDispatch,singerDetail={},songUrl=[],songDetail=[],songLyric={} } = props;
    const {artist={} ,hotSongs=[]} = singerDetail
    const {picUrl} = artist
    const {} = hotSongs
    let {pathname} = useLocation();
    let urlSinger = pathname.split("/");
    // console.log(urlArray);
     SingerID = parseInt(urlSinger[2]);
    //  console.log(artist);
     const history = useHistory()
    const gotoDetail = () => {
        // console.log(history,'history')
        history.push(`/home/main`)
    }
    let [ SongId,setSongId] =useState(0);
    if(!SongId){
        songId =0;
    }
    else{
        songId = SongId;
    }
    useEffect(() => {
        
        getDetailDataDispatch()
   
    }, [songId])
    
     useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [])
    return (
        <div>
           <div className="main_singer">
                
                         {
                        singerDetail["id"]=SingerID?
                        <div className="">
                            <div className="top_singer_detail" style={{backgroundImage:`url(${picUrl})`}}>
                                <div className="top_icon">
                                    <img src={left_arrow} alt="" className="left_arrow" onClick={gotoDetail}/>
                                    <img src={ellipsis_white} alt={""} className="ellipsis_white"/>
                                    
                                </div>

                            </div>
                            <div className="footer_song_list">
                                <SongList tracks={hotSongs} SongId={SongId} setSongId={setSongId} songUrl={songUrl}/>
                            </div>
                            {songUrl.length&&songDetail.length&&songLyric?<ControlSong  songUrl={songUrl} songDetail={songDetail} Lyric={songLyric}/>:<></>
            }
                        </div>
                        :<></>
}
                
           </div>
        </div>
    )
}
const mapStateToDispatch = (dispatch) => {
    // console.log(dispatch); 
   
    return {
        getDetailDataDispatch() {
            // console.log(AlbumID,'333333');
                dispatch(actionTypes.getSingerDetail(SingerID)),
                dispatch(actionTypes.getSongUrl(songId)),
                dispatch(actionTypes.getSongDetail(songId))
                dispatch(actionTypes.getSongLyric(songId))
    
                
                // dispatch(actionTypes.get(0))
            
        }
    }
}
const mapStateToProps = (state) => {
    console.log(state,'state')
    return {
        singerDetail:state.detail.singerDetail,
        songUrl:state.songDetail.songUrl,
        songDetail:state.detail.songDetail.songs,
        songLyric:state.detail.songLyric.lrc
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(SingerDetail))